<template>
  <section>
    <article v-if="$slots.toolbar" class="flex gap-2 mb-2">
      <slot name="toolbar" />
    </article>
    <el-table
      v-loading="tableLoading"
      :data="getTableData"
      border
      highlight-current-row
      v-bind="$attrs"
      style="width: 100%"
    >
      <el-table-column
        v-for="(column, index) in getTableColumns"
        :key="index"
        v-bind="column"
      >
        <template v-if="column.slotName" #default="scope">
          <slot :name="column.slotName" v-bind="scope"></slot>
        </template>
      </el-table-column>
    </el-table>
  </section>
</template>
<script lang="ts" setup>
import { TableMethods } from "./hooks/useTableMethods";
import { TableModel } from "./hooks/useTableModel";
defineOptions({
  inheritAttrs: false,
});
const emits = defineEmits(["register"]);

const methods = TableMethods.getInstance();
const { tableLoading } = TableModel.getInstance();

const { getTableData, getTableColumns } = TableMethods.Methods;

onMounted(() => {
  emits("register", {
    setProps: methods.setProps,
  });
});
</script>
